<template>
	<div class="el-button-content" @click="_onclick">
		<slot></slot>
	</div>
</template>

<script>
	export default {
		name: 'el-button',
		methods: {
			_onclick() {
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.el-button-content {
		display: inline-block;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		background: #409eff;
		border: 1px solid #dcdfe6;
		color: #fff;
		-webkit-appearance: none;
		text-align: center;
		box-sizing: border-box;
		outline: none;
		margin: 0;
		transition: .1s;
		font-weight: 500;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		padding: 8px 20px;
		font-size: 14px;
		border-radius: 4px;

		&:hover {
			background: #79bbff;
		}

		&:active {
			background: #409eff;
		}
	}
</style>
